<?php defined('SYSPATH') or die();?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>思途CMS{$coreVersion}</title>
    {template 'stourtravel/public/public_min_js'}
    {php echo Common::getCss('style.css,base.css,base2.css,base_new.css,m.footmenu.css'); }
    {Common::getScript("jquery.upload.js,choose.js,st_validate.js,jquery.colorpicker.js,imageup.js,jquery.upload.js")}
    <style>
        .menu_table td{
            text-align: center;
        }
    </style>
</head>
<body>

    <table class="content-tab">
        <tr>
            <td width="119px" class="content-lt-td" valign="top">
                {template 'stourtravel/public/leftnav'}
                <!--右侧内容区-->
            </td>
            <td valign="top" class="content-rt-td" style="overflow-x:hidden;">
                <div class="cfg-header-bar">
                    <a href="javascript:;" class="fr btn btn-primary radius mt-6 mr-10" onclick="window.location.reload()">刷新</a>
                </div>
                <div class="clearfix">
                    <table>
                        <tr><td width="377px" valign="top"><div class="foot-img ml-20 mt-20" >
                                    <div id="footNav">
                                        <a class="footNav__a" href="javascript:;">
                                            <div class="footNav__div"><img src="{$tpl}/addMenu/images/Home-f.png" alt=""></div>
                                            <p class="footNav__p">首页</p>
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td valign="top">
                                <form id="frm">
                                    <div  class="product-add-div content-show">
                                        <ul class="info-item-block">
                                            <li>
                                                <span class="item-hd w90">底部菜单{Common::get_help_icon('footmenu')}：</span>
                                                <div class="pl-75">
                                                    <label class="radio-label"><input type="radio" name="cfg_m_footmenu_open" {if $cfg['cfg_m_footmenu_open']==1}checked="checked"{/if} value="1">开启</label>
                                                    <label class="radio-label ml-20"><input type="radio" name="cfg_m_footmenu_open" {if $cfg['cfg_m_footmenu_open']==0}checked="checked"{/if} value="0">关闭</label>
                                                </div>
                                            </li>
                                        </ul>

                                        <ul class="info-item-block">
                                            <li>
                                                <span class="item-hd w70">样式设置</span>
                                                <div class="item-bd">
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="line"></div>
                                        <ul class="info-item-block">
                                            <li>
                                                <span class="item-hd w70">背景设置：</span>
                                                <div class="item-bd">
                                                    <label class="radio-label"><input type="radio" name="cfg_m_footmenu_bg_type" {if $cfg['cfg_m_footmenu_bg_type']==0}checked="checked"{/if} value="0">颜色</label>
                                                    <label class="radio-label ml-20"><input type="radio" name="cfg_m_footmenu_bg_type" {if $cfg['cfg_m_footmenu_bg_type']==1}checked="checked"{/if}  value="1">图片</label>
                                                </div>
                                            </li>
                                            <li class="bg_switch bg_switch_0">
                                                <span class="item-hd w70">背景颜色：</span>
                                                <div class="item-bd">
                                                    <input type="text" name="cfg_m_footmenu_bg_color" style="{if !empty($cfg['cfg_m_footmenu_bg_color'])}color:{$cfg['cfg_m_footmenu_bg_color']}{/if}" value="{if !empty($cfg['cfg_m_footmenu_bg_color'])}{$cfg['cfg_m_footmenu_bg_color']}{/if}"  class="input-text w100 title-color">
                                                    <span style="display: inline-block; width: 15px; height: 15px; vertical-align: middle; {if !empty($cfg['cfg_m_footmenu_title_color'])}background:{$cfg['cfg_m_footmenu_title_color']}{/if}"></span>
                                                </div>
                                            </li>
                                            <li class=" bg_switch bg_switch_1">
                                                <span class="item-hd w70">背景图片：</span>
                                                <div class="item-bd">
                                                    <div>
                                                        <a href="javascript:;" class="btn btn-primary radius size-S mt-5 event_file_upload" data="{title:'上传图片',callback:'upload_img'}">上传图片</a>
                                                    </div>
                                                    <div class="pt-20">
                                                        <img src="{$cfg['cfg_m_footmenu_bg_pic']}" id="m_adimg" class="up-img-area">
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <span class="item-hd w70">文字颜色：</span>
                                                <div class="item-bd">
                                                    <input type="text" name="cfg_m_footmenu_title_color" style="{if !empty($cfg['cfg_m_footmenu_title_color'])}color:{$cfg['cfg_m_footmenu_title_color']}{/if}" value="{if !empty($cfg['cfg_m_footmenu_title_color'])}{$cfg['cfg_m_footmenu_title_color']}{/if}"  class="input-text w100 title-color">
                                                    <span style="display: inline-block; width: 15px; height: 15px; vertical-align: middle; {if !empty($cfg['cfg_m_footmenu_title_color'])}background:{$cfg['cfg_m_footmenu_title_color']}{/if}"></span>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="w700">
                                            <div class="pd-10"><span>菜单管理</span>  <a href="javascript:;" id="add_menu_btn" class="fr pd-5 btn-secondary-outline">添加菜单</a></div>
                                        </div>
                                        <div class="line"></div>
                                        <table class="table table-bg table-hover w700 mt-10 menu_table" align="center">
                                            <thead>
                                            <tr class="text-c">
                                                <th scope="col" width="10%" align="center">排序</th>
                                                <th scope="col" width="15%">名称</th>
                                                <th scope="col" width="10%">图标</th>
                                                <th scope="col" width="10%">类型</th>
                                                <th scope="col" width="40">内容</th>
                                                <th scope="col" width="15%">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {loop $list  $row}
                                            <tr id="menu_{$row['id']}" data-id="{$row['id']}" data-litpic="{$row['litpic']}" data-title="{$row['title']}">
                                                <td>
                                                    <input type="text" class="input-text w50 displayorder" name="menu_order[{$row['id']}]" value="{$row['displayorder']}"/>
                                                </td>
                                                <td align="center">
                                                    {$row['title']}
                                                </td >
                                                <td>
                                                    <div class="area-icon">
                                                        <img src="{$row['litpic']}" />
                                                    </div>
                                                </td>
                                                <td>
                                                    {if $row['link_type']==0}链接{elseif $row['link_type']==1}电话{else}QQ{/if}
                                                </td>
                                                <td>
                                                    <div class="w300">{$row['link_content']}</div>
                                                </td>
                                                <td>
                                                    <a href="javascript:void(0);" title="编辑" class="btn-link" onclick="modifyMenu({$row['id']})">编辑</a>
                                                    <a href="javascript:void(0);" title="删除" class="btn-link ml-10" onclick="delMenu({$row['id']})">删除</a>
                                                </td>
                                            </tr>
                                            {/loop}
                                            </tbody>
                                        </table>


                                    </div>

                                    <input type="hidden" id="field_cfg_m_footmenu_bg_pic" name="cfg_m_footmenu_bg_pic" value="{$cfg['cfg_m_footmenu_bg_pic']}"/>

                                    <div class="clear clearfix pd-20">
                                        <a class="btn btn-primary radius size-L ml-20" id="save_btn" href="javascript:;">保存</a>
                                    </div>
                                </form></td></tr>
                    </table>

                </div>

            </td>
        </tr>
    </table>

<script>

  $(document).ready(function(){
      //颜色选择器
      $(".title-color").colorpicker({
          ishex:true,
          success:function(o,color){
              $(o).val(color);
              $(o).next().css('background',color);
              refresh_view();
          },
          reset:function(o){
              $(o).val('');
              $(o).next().css('background','');
              refresh_view();
          }
      });


      //模式切换
      $("input[name=cfg_m_footmenu_bg_type]").click(function(){
          var val = $(this).val();
          $(".bg_switch").hide();
          $(".bg_switch_"+val).show();
      });
      $("input[name=cfg_m_footmenu_bg_type]:checked").trigger('click');



      //图片上传
      $('.event_file_upload').click(function () {
          var obj = eval('(' + $(this).attr('data') + ')');
          console.log(obj);
          ST.Util.showBox(obj.title, SITEURL + 'image/insert_view', 0, 0, null, null, parent.document, {
              loadWindow: window,
              loadCallback: eval('(' + obj.callback + ')')
          });
          function upload_img(result, bool) {
              if (bool) {
                  var src = result['data'][0].replace(/\$\$.*?$/, '');
                  $('#m_adimg').attr('src', src);
                  $('#field_cfg_m_footmenu_bg_pic').val(src);
              }
          }
      });


      //添加菜单
      $("#add_menu_btn").click(function(){
          var boxurl = SITEURL + 'mobile/dialog_add_footmenu/';
          var params = {
              loadWindow:     window,
              loadCallback:   function(data){
                  var html=gen_menu_html(data);
                  $(".menu_table").append(html);
              }
          };
          ST.Util.showBox('添加底部菜单', boxurl,550,400,null,null,document,params);
      });

      //刷新菜单
      refresh_view();

      $(document).on('change','.displayorder',function(){
          refresh_view();
      });

      $("input:radio").click(function(){
          refresh_view();
      });



      //保存
      $("#save_btn").click(function(){
          $.ajaxform({
              url   :  SITEURL+"mobile/ajax_footmenu_param_save",
              method  :  "POST",
              form  : "#frm",
              dataType  :  "json",
              success  :  function(data)
              {
                  if(data.status)
                  {
                      ST.Util.showMsg('保存成功',4,1000);

                  }
                  else
                  {
                      ST.Util.showMsg('保存错误',5);
                  }

              }});
      });

  });


  function modifyMenu(id)
  {
      var boxurl = SITEURL + 'mobile/dialog_edit_footmenu?id='+id;
      var params = {
          loadWindow:     window,
          loadCallback:   function(data){
              var html=gen_menu_html(data);
              $("#menu_"+id).replaceWith(html);
          }
      };
      ST.Util.showBox('修改底部菜单', boxurl,550,400,null,null,document,params);
  }

  function delMenu(id)
  {
      $.ajax({
          type: "POST",
          url: SITEURL+"mobile/ajax_del_footmenu",
          data: {id:id},
          dataType: "json",
          success: function(data){
              if(data.status)
              {
                  $("#menu_"+id).remove();
              }
          }

      });


  }


  function gen_menu_html(data)
  {

      var html='<tr id="menu_'+data['id']+'">';
      html+='<td>';
      html+='<input type="text" class="input-text w50" name="menu_order['+data['id']+']" value="">';
      html+='</td>';
      html+='<td align="center">';
      html+= data['title'];
      html+='</td>';
      html+='<td><div class="area-icon">';
      html+=' <img src="'+data['litpic']+'">';
      html+='<div></td>';
      html+='<td>';

      if(data['link_type']=='0')
      {
         html+='链接';
      }
      else if(data['link_type']=='1')
      {
          html+='电话';
      }
      else
      {
          html+='QQ';
      }
      html+='</td>';
      html+='<td><div class="w300">';
      html+= data['link_content'];
      html+='</div></td>';
      html+='<td>';
      html+='<a href="javascript:void(0);" title="编辑" class="btn-link" onclick="modifyMenu('+data['id']+')">编辑</a>';
      html+='<a href="javascript:void(0);" title="删除" class="btn-link ml-10" onclick="delMenu('+data['id']+')">删除</a>';
      html+='</td>';
      html+='</tr>';
      return html;
  }

  function refresh_view()
  {
      var menu_arr = [];
      $(".menu_table tbody tr").each(function(index,ele){
          var row={};
          row['displayorder'] = parseInt($(ele).find('.displayorder').val());
          row['displayorder'] = row['displayorder']=='' || !row['displayorder']?9999:row['displayorder'];
          row['title'] = $(ele).attr('data-title');
          row['litpic'] = $(ele).attr('data-litpic');
          row['id'] = parseInt($(ele).attr('data-id'));
          menu_arr.push(row);
      });
      menu_arr.sort(function(a,b){
          if(a.displayorder!= b.displayorder)
          {
              return a.displayorder > b.displayorder;
          }
          else
          {
              return a.id> b.id;
          }
      });

      var title_color = $("input[name=cfg_m_footmenu_title_color]").val();



      var menu_width_ratio = menu_arr.length>0? 100/menu_arr.length:100;
      menu_width_ratio+='%';
      var menu_html='';
      for(var i in menu_arr)
      {
          var menu = menu_arr[i];
          menu_html+=' <a class="footNav__a" href="javascript:;" style="width:'+menu_width_ratio+'">';
          menu_html+='<div class="footNav__div"><img src="'+menu.litpic+'" alt=""></div>';
          menu_html+='<p class="footNav__p"';
          menu_html+= !title_color|| title_color==''?'':' style="color:'+title_color+'" ';
          menu_html+='>'+menu.title+'</p>';
          menu_html+='</a>';
      }

      var bg_type = $("input[name=cfg_m_footmenu_bg_type]:checked").val();
      var bg_color = $("input[name=cfg_m_footmenu_bg_color]").val();
      var bg_pic = $("input[name=cfg_m_footmenu_bg_pic]").val();
      if(bg_type=='1')
      {
          $("#footNav").attr('style','background:url('+bg_pic+') no-repeat;background-size:cover');
      }
      else
      {
          if(bg_color && bg_color!='')
          {
              $("#footNav").attr('style', 'background:'+bg_color);
          }
      }







      $("#footNav").html(menu_html);
  }



</script>

</body>
</html>
